<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
  </head>
  <!-- //这是CDN JQ链接 -->
  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <!-- !这是引入CDN layui外部链接 -->
  <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css"/>
  
  <!-- ?/这是 layui链接CDN  -->
  <script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>

 
  <style>

    button {
      position: relative;
      top: 80%;
      left: 50%;
    }
    /* 背景图片 */
    body {
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7a%2Fe9%2F09%2F7ae9095be9ddb46d0146cef3e47ee99c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663229699&t=928ecb089a9461bea3d0cb011d3d64d8);
      background-size: 100%;
    }
  </style>

  <body>
    <div class="layui-container">
      <div class="layui-row">
        <div class="div1">
          <div class="layui-form-item">
            <label class="layui-form-label">输入账号</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="title"
                required
                lay-verify="required"
                placeholder="账号"
                autocomplete="off"
                class="layui-input"
                id="name"
              />
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">输入密码</label>
            <div class="layui-input-block">
              <input
                type="password"
                name="title"
                required
                lay-verify="required"
                placeholder="密码"
                autocomplete="off"
                class="layui-input"
                id="pow"
              />
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">验 证 码</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="title"
                required
                lay-verify="required"
                placeholder="请输入下边的验证码"
                autocomplete="off"2
                class="layui-input"
                id="Verification"
              />
              <img src="" alt="" id="code" />
            </div>
          </div>
          <button
            class="layui-btn layui-btn-radius layui-btn-normal"
            id="submit"
          >
            登 录
          </button>
        </div>
      </div>
    </div>
  </body>

  <script>
    var key = "",
      res = [];
    $("#submit").click(function () {
      $.ajax({
        type: "post",
        url: "https://api.zzgoodqc.cn/api/login",
        dataType: "json",
        data: {
          username: $("#name").val(),
          password: $("#pow").val(),
          captcha: $("#Verification").val(),
          key: key,
        },
        success: function (res) {
          alert(res.message);
          var token = res.data.token;

          if (res.code == 200) {
            window.location.href = "./page.html";
            res = JSON.parse(localStorage.getItem("res")) ?? [];
            res = {
              name: $("#name").val(),
              Authorization: token,
            };
            localStorage.setItem("res", JSON.stringify(res));
          }
        },
      });
    });

    fun();
    function fun() {
      $.ajax({
        type: "get",
        url: "https://api.zzgoodqc.cn/api/captcha",
        dataType: "json",
        success: function (res) {
          console.log(res);
          $("img").attr("src", res.data.img);
          key = res.data.key;
        },
      });
    }

    $("#code").click(fun);
  </script>
</html>
